<template>
  <div class="clip-task-list">
    <!-- 搜索筛选区域 -->
    <el-card class="filter-card">
      <el-row :gutter="20" type="flex" align="bottom">
        <el-col :span="6">
          <el-input
            v-model="clipSearchKeyword"
            placeholder="请输入搜索关键词"
            prefix-icon="Search"
            clearable
            @keyup.enter="handleClipSearch"
          />
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="streamNameFilter"
            placeholder="请输入直播名称"
            clearable
            @keyup.enter="handleClipSearch"
          />
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="statusFilter"
            placeholder="请选择状态"
            clearable
            @change="handleClipSearch"
          >
            <el-option label="处理中" value="processing" />
            <el-option label="已完成" value="completed" />
            <el-option label="失败" value="failed" />
            <el-option label="待处理" value="pending" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="formatFilter"
            placeholder="请选择格式"
            clearable
            @change="handleClipSearch"
          >
            <el-option label="MP4" value="mp4" />
            <el-option label="HLS" value="hls" />
          </el-select>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 拆条任务列表 -->
    <el-table
      v-loading="clipLoading"
      :data="displayedTasks"
      style="width: 100%"
    >
      <el-table-column prop="id" label="任务ID" width="180" />
      <el-table-column prop="name" label="任务名称" width="250">
        <template #default="scope">
          <span class="task-name">
            <el-icon><Document /></el-icon>
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="source_file" label="源文件" width="300">
        <template #default="scope">
          <span class="source-file">
            <el-icon><Folder /></el-icon>
            {{ scope.row.source_file }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="stream_name" label="直播名称" width="180" />
      <el-table-column prop="start_time" label="开始时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.start_time) }}
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.end_time) }}
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" width="100">
        <template #default="scope">
          {{ formatDuration(scope.row.duration) }}
        </template>
      </el-table-column>
      <el-table-column prop="output_format" label="格式" width="80" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="进度" width="120" v-if="showProgress">
        <template #default="scope">
          <el-progress
            :percentage="scope.row.progress"
            :status="getProgressStatus(scope.row.status)"
            :stroke-width="6"
            text-inside
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" class="action-cell">
        <template #default="scope">
          <div class="action-buttons">
            <el-button
              v-if="scope.row.status === 'completed' && scope.row.m3u8_url"
              type="text"
              size="small"
              icon="VideoPlay"
              @click="previewClip(scope.row)"
              title="预览"
            />
            <el-button
              v-if="scope.row.status === 'completed' && scope.row.mp4_url"
              type="text"
              size="small"
              icon="Download"
              @click="downloadClip(scope.row)"
              title="下载"
            />
            <el-button
              type="text"
              size="small"
              icon="Delete"
              @click="deleteTask(scope.row)"
              title="删除"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="clipCurrentPage"
        v-model:page-size="clipPageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalClipTasks"
        @size-change="handleClipSizeChange"
        @current-change="handleClipCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Document, Folder, VideoPlay, Download, Delete } from '@element-plus/icons-vue'
import { useRecordingClipping } from './useRecordingClipping'

// 使用录制拆条功能钩子
const {
  clipLoading,
  clipTasks,
  clipSearchKeyword,
  streamNameFilter,
  statusFilter,
  formatFilter,
  clipCurrentPage,
  clipPageSize,
  totalClipTasks,
  displayedTasks,
  getStatusType,
  getStatusText,
  getProgressStatus,
  formatDateTime,
  handleClipSearch,
  handleClipSizeChange,
  handleClipCurrentChange,
  previewClip,
  downloadClip,
  deleteTask
} = useRecordingClipping()

// 是否显示进度列
const showProgress = ref(true)

// 格式化时长
const formatDuration = (seconds) => {
  if (!seconds) return '00:00:00'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.filter-card {
  margin-bottom: 20px;
  padding: 16px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.action-cell {
  display: flex;
  justify-content: center;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.task-name,
.source-file {
  display: flex;
  align-items: center;
}

.task-name .el-icon,
.source-file .el-icon {
  margin-right: 8px;
  color: #606266;
}
</style>